<template>
  <div class="personal-exam p-d">
    <div class="p-d b-f m-b">
      <SearchComp :searchForm="searchForm" :searchData="queryString" :searchAction="searchAction"></SearchComp>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="未完成">
        <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig" :tableAction="tableAction" :isSelect="true"
          :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
        </TableCompEle>
      </el-tab-pane>
      <el-tab-pane label="已完成">
        <TableCompEle class="m-t" ref="multipleTable" :tableData="tableData" :tableConfig="tableConfig2" :tableAction="tableAction2" :isSelect="true"
          :isIndex="true" :isShowPage="true" :queryParams="queryParams" @getPagination="getList" @handleSelectionChange="handleSelectionChange">
        </TableCompEle>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        total: 8,
        currentPage: 1,
        pageSize: 10
      },
      queryString: {
        title: '',
        source: ''
      },
      searchForm: {
        changeMethod: () => {
          this.queryParams.currentPage = 1
        },
        formData: [
          {
            type: 'Input',
            label: '标题',
            prop: 'title',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入标题'
          },
          {
            type: 'Input',
            label: '来源',
            prop: 'source',
            clearable: true,
            icon: 'el-icon-search',
            placeholder: '请输入来源'
          }
        ]
      },
      searchAction: [
        {
          label: '查询',
          type: 'primary',
          handle: () => {
            this.queryParams.currentPage = 1
            this.$refs.multipleTable.clearSelection()
          }
        },
        {
          label: '重置',
          type: 'primary',
          plain: true,
          handle: () => {
            this.queryString = {
              title: '',
              source: ''
            }
            this.queryParams.currentPage = 1
          }
        }
      ],
      tableData: [
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
        {
          name: '二十大报告延伸学习资料',
          name2: '不限时',
          name3: '60分钟',
          name4: '100',
          name5: '60',
        },
      ],
      tableConfig: [
        {
          prop: 'name',
          label: '考试名称'
        },
        {
          prop: 'name2',
          label: '考试时间'
        },
        {
          prop: 'name3',
          label: '考试时长'
        },
        {
          prop: 'name4',
          label: '考试总分'
        },
        {
          prop: 'name5',
          label: '及格线'
        },
      ],
      tableConfig2: [
        {
          prop: 'name',
          label: '考试名称'
        },
        {
          prop: 'name2',
          label: '考试时间'
        },
        {
          prop: 'name3',
          label: '考试时长'
        },
        {
          prop: 'name4',
          label: '考试总分'
        },
        {
          prop: 'name5',
          label: '及格线'
        },
        {
          prop: 'name5',
          label: '最终得分'
        },
      ],
      tableAction: {
        align: () => 'center',
        width: () => String(90),
        operations: [
          {
            label: '去考试',
            isLink: true,
            type: 'primary',
            method: () => {
            }
          },
        ]
      },
      tableAction2: {
        align: () => 'center',
        width: () => String(90),
        operations: [
          {
            label: '查看',
            isLink: true,
            type: 'primary',
            method: () => {
            }
          },
        ]
      },
    }
  },
}
</script>

<style lang="less" scoped>
</style>